<template>
    <div id="container"></div>
</template>
<script lang="ts">
import { defineComponent, ref, onMounted , reactive , toRaw , watch } from 'vue'
import AMapLoader from '@amap/amap-jsapi-loader'
import aqm from '../img/aqm.png'
export default defineComponent( {
    name: 'v-map',
    components: {},
    props: {
        detailInfo: {
            type: String,
            default: ''
        },
        isUseDialog: {
            type: String,
            default: ''
        }
    },
    setup(props){
        const map:any = ref(null)
        const AMap:any = ref(null)
        let getInfo:any = {}

		const initMap = async() => {
			try {
				let AMaps = await AMapLoader.load({
					key: "60325c6451fa7d3637f4c862898cc342", // 申请好的Web端开发者Key，首次调用 load 时必填
					version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
					plugins: [
						'AMap.CircleEditor',
						'AMap.PolygonEditor',
						'AMap.Polygon',
						'AMap.PolyEditor',
						'AMap.ToolBar',
						'AMap.Scale',
						'AMap.OverView',
						'AMap.MapType',
						'AMap.Geolocation',
						'AMap.AutoComplete',
						'AMap.PlaceSearch',
                        'AMap.Geocoder',
					], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
				})
				map.value = new AMaps.Map("container", { //设置地图容器id
					viewMode: "3D", //是否为3D地图模式
					zoom: 17, //初始化地图级别
					center: [getInfo.gpsData.lng , getInfo.gpsData.lat], //初始化地图中心点位置
                    resizeEnable: true,
				})
                let geocoder = new AMaps.Geocoder({
                    city: "010", //城市设为北京，默认：“全国”
                    radius: 1000 //范围，默认：500
                })
                geocoder.getAddress([getInfo.gpsData.lng , getInfo.gpsData.lat], (status:any, result:any) => {
                    if (status === 'complete'&&result.regeocode) {
                        let address = result.regeocode.formattedAddress;
                        console.log(address,'address')
                        getInfo.getAdd = address
                    }else{
                        console.log('根据经纬度查询地址失败')
                    }
                })
                let marker = new AMaps.Marker({  //创建标记
                    position: new AMaps.LngLat(getInfo.gpsData.lng , getInfo.gpsData.lat),
                    icon: new AMaps.Icon({
                        size: new AMaps.Size(30,30),
                        image: aqm,
                        imageSize: new AMaps.Size(25,25)
                    })
                })
                // marker.setMap(map)
                map.value.add(marker)
                setTimeout(() => {
                    let infoWindow = new AMaps.InfoWindow({
                        isCustom: true, //是否自定义信息窗体
                        closeWhenClickMap: false,
                        content: `<div style="background-color: rgba(255,255,255,1);padding:0;width: 400px;">
                            <div style="width: 100%;padding: 10px;background: #409EFF;color:#FFFFFF;">
                                <span style="display: block;" id="info-window-title">智能安全帽：${getInfo.helmeTId}</span>
                            </div>
                            <div style="padding: 10px;">
                                <div style="margin-bottom: 6px;">位置：${getInfo.gpsData.address}</div>
                                <div style="margin-bottom: 6px">4G信号：<span style="color:${getInfo.mobile ? '#67C23A' : '#F56C6C'}">${getInfo.mobile ? '开启' : '关闭'}</span></div>
                                <div style="margin-bottom: 6px">电量：<span>${getInfo.battery}</span></div>
                            <div style="margin-bottom: 6px">麦克风：<span style="color:${getInfo.mic ? '#67C23A' : '#F56C6C'}">${getInfo.mic ? '开启' : '关闭'}</span></div>
                            <div style="margin-bottom: 6px">WIFI：<span style="color:${getInfo.wifi ? '#67C23A' : '#F56C6C'}">${getInfo.wifi ? '开启' : '关闭'}</span></div>
                            <div style="margin-bottom: 6px">激光：<span style="color:${getInfo.laser ? '#67C23A' : '#F56C6C'}">${getInfo.laser ? '开启' : '关闭'}</span></div>
                            <div style="margin-bottom: 6px">蓝牙：<span style="color:${getInfo.blueTooth ? '#67C23A' : '#F56C6C'}">${getInfo.blueTooth ? '开启' : '关闭'}</span></div>
                                <div style="margin-bottom: 6px">温度：<span>${getInfo.logExtraDataDto ? getInfo.logExtraDataDto.envTemp : '尚未检测'}</span></div>
                                <div style="margin-bottom: 6px">气压：<span>${getInfo.logExtraDataDto ? getInfo.logExtraDataDto.pressure : '尚未检测'}</span></div>
                            </div>
                        </div>`,
                        zIndex: 999,
                        offset: new AMaps.Pixel(0,0)
                    })
                    infoWindow.open(map.value, marker.getPosition())
                },200)

				AMap.value = AMaps
				map.value.addControl(new AMaps.ToolBar());
			} catch (err) {
				console.log(err)
			}
		}

        /*** mapFun 渲染地图函数 */
        const mapFun = (i:any) => {
            console.log(i,'i')
            map.value = new AMap.value.Map("container", { //设置地图容器id
                viewMode: "3D", //是否为3D地图模式
                resizeEnable: true,
                zoom: 17, //初始化地图级别
                center: [i.gpsData.lng , i.gpsData.lat], //初始化地图中心点位置
            })
            let geocoder = new AMap.value.Geocoder({
                city: "010", //城市设为北京，默认：“全国”
                radius: 1000 //范围，默认：500
            })
            geocoder.getAddress([getInfo.gpsData.lng , getInfo.gpsData.lat], (status:any, result:any) => {
                if (status === 'complete'&&result.regeocode) {
                    let address = result.regeocode.formattedAddress;
                    console.log(address,'address')
                    i.getAdd = address
                }else{
                    console.log('根据经纬度查询地址失败')
                }
            })
            let marker = new AMap.value.Marker({  //创建标记
                position: new AMap.value.LngLat(i.gpsData.lng , i.gpsData.lat),
                icon: new AMap.value.Icon({
                    size: new AMap.value.Size(30,30),
                    image: aqm,
                    imageSize: new AMap.value.Size(25,25)
                })
            })
            map.value.add(marker)
            setTimeout(() => {
                let infoWindow = new AMap.value.InfoWindow({
                    isCustom: true, //是否自定义信息窗体
                    closeWhenClickMap: false,
                    content: `<div style="background-color: rgba(255,255,255,1);padding:0;width: 400px;">
                        <div style="width: 100%;padding: 10px;background: #409EFF;color:#FFFFFF;">
                            <span style="display: block;" id="info-window-title">智能安全帽：${i.helmeTId}</span>
                        </div>
                        <div style="padding: 10px;">
                            <div style="margin-bottom: 6px;">位置：${i.gpsData.address}</div>
                            <div style="margin-bottom: 6px">4G信号：<span style="color:${i.mobile ? '#67C23A' : '#F56C6C'}">${i.mobile ? '开启' : '关闭'}</span></div>
                            <div style="margin-bottom: 6px">麦克风：<span style="color:${i.mic ? '#67C23A' : '#F56C6C'}">${i.mic ? '开启' : '关闭'}</span></div>
                            <div style="margin-bottom: 6px">WIFI：<span style="color:${i.wifi ? '#67C23A' : '#F56C6C'}">${i.wifi ? '开启' : '关闭'}</span></div>
                            <div style="margin-bottom: 6px">激光：<span style="color:${i.laser ? '#67C23A' : '#F56C6C'}">${i.laser ? '开启' : '关闭'}</span></div>
                            <div style="margin-bottom: 6px">蓝牙：<span style="color:${i.blueTooth ? '#67C23A' : '#F56C6C'}">${i.blueTooth ? '开启' : '关闭'}</span></div>
                            <div style="margin-bottom: 6px">电量：<span>${i.battery}</span></div>
                            <div style="margin-bottom: 6px">温度：<span>${i.logExtraDataDto ? i.logExtraDataDto.envTemp : '尚未检测'}</span></div>
                            <div style="margin-bottom: 6px">气压：<span>${i.logExtraDataDto ? i.logExtraDataDto.pressure : '尚未检测'}</span></div>
                        </div>
                    </div>`,
                    zIndex: 999,
                    offset: new AMap.value.Pixel(0,0)
                })
                infoWindow.open(map.value, marker.getPosition())
            },200)
        }

        /*** onMounted 页面加载时显示 */
        onMounted(async() => {
            let setTime = setInterval(() => {
                if(props.detailInfo !== ''){
                    console.log(JSON.parse(props.detailInfo),'12')
                    getInfo = JSON.parse(props.detailInfo)
                    initMap()
                    clearInterval(setTime)
                }
            },20)
        })

        /*** 监听isUseDialog的变化 */
        watch(() => props.isUseDialog,(newVal) => {
            if(newVal){
                let setTime = setInterval(() => {
                    if(props.detailInfo !== '' && AMap.value){
                        mapFun(JSON.parse(props.detailInfo))
                        clearInterval(setTime)
                    }
                },20)
            }
        })

        return {}
    },
} )
</script>
<style scoped lang="scss">
</style>